<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="68px">
      <el-form-item label="任务类名" prop="jobClassName">
        <el-input
          v-model="queryParams.jobClassName"
          placeholder="请输入任务类名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input
          v-model="queryParams.description"
          placeholder="请输入描述"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"> 搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"> 重置</el-button>
      </el-form-item>
    </el-form>
    <!-- table区域-begin -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd"> 新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <!--        <el-button type="success" icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate">
          修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete">
          删除
        </el-button>-->
      </el-col>
    </el-row>

    <el-table style="margin-top: 10px" v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="任务类名" align="center" prop="jobClassName" />
      <el-table-column label="cron表达式" align="center" prop="cronExpression" />
      <el-table-column label="参数" align="center" prop="parameter" />
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0" type="success"> 已启动 </el-tag>
          <el-tag v-if="scope.row.status == -1" type="danger"> 已停止 </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="描述" align="center" prop="description" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-video-play"
            @click="resumeJob(scope.row)"
            v-if="scope.row.status == -1"
          >
            启动
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-video-pause"
            @click="pauseJob(scope.row)"
            v-if="scope.row.status == 0"
          >
            停止
          </el-button>
          <el-divider direction="vertical" />
          <el-dropdown>
            <span class="el-dropdown-link"> 更多<i class="el-icon-arrow-down el-icon--right"></i> </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :divided="true">
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">
                  编辑
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">
                  删除
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button size="mini" type="text" icon="el-icon-caret-right" @click="executeImmediately(scope.row)">
                  立即执行
                </el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!--分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="getList"
    />
    <!-- 表单区域 -->
    <quartzJob-modal ref="modalForm" @ok="modalFormOk"></quartzJob-modal>
  </div>
</template>

<script>
import QuartzJobModal from './QuartzJobModal'
import { delQrtz, resumeQrtz, pauseQrtz, executeQrtz } from '@/api/mange/qrtz'
import { filterObj } from '@/utils/util'
import { TduckListMixin } from '@/mixins/TduckListMixin'
export default {
  name: 'QuartzJobList',
  components: {
    QuartzJobModal
  },
  mixins: [TduckListMixin],
  data() {
    return {
      description: '定时任务在线管理',
      url: {
        list: '/sys/quartzJob/list'
      }
    }
  },
  computed: {},
  methods: {
    modalFormOk() {
      this.getList()
    },
    getQueryParams() {
      //获取查询条件
      let sqp = {}
      var param = Object.assign(sqp, this.queryParams)
      if (param.description) {
        param.description = '*' + param.description + '*'
      }
      return filterObj(param)
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 多选框选中数据

    //筛选需要重写handleTableChange
    pauseJob: function (record) {
      var that = this
      //暂停定时任务
      this.$confirm('是否暂停选中任务?')
        .then(() => {
          this.loading = true
        })
        .then(() => {
          pauseQrtz({ id: record.id }).then((res) => {
            if (res.code === 200) {
              that.msgSuccess(res.msg)
              that.getList()
              // that.onClearSelected()
            } else {
              that.msgWarning(res.msg)
            }
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
    resumeJob: function (record) {
      var that = this
      //恢复定时任务
      this.$confirm('是否启动选中任务?')
        .then(() => {
          this.loading = true
        })
        .then(() => {
          resumeQrtz({ id: record.id }).then((res) => {
            if (res.code === 200) {
              that.msgSuccess(res.msg)
              that.getList()
              // that.onClearSelected()
            } else {
              that.msgWarning(res.msg)
            }
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
    executeImmediately(record) {
      const that = this
      //立即执行定时任务
      this.$confirm('是否立即执行任务?')
        .then(() => {
          this.loading = true
        })
        .then(() => {
          executeQrtz({ id: record.id }).then((res) => {
            if (res.code === 200) {
              that.msgSuccess(res.msg)
              that.getList()
              // that.onClearSelected()
            } else {
              that.msgWarning(res.msg)
            }
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleAdd() {
      this.$refs.modalForm.add()
      this.title = '添加定时任务'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      /*this.loading = true
                        this.reset()
                        const id = row.id || this.ids
                        getQrtz(id).then((response) => {
                            this.loading = false
                            this.form = response.data
                            this.open = true
                            this.title = '修改定时任务'
                        })*/
      this.$refs.modalForm.edit(row)
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认删除用户编号为"' + row.id + '数据项？')
        .then(() => {
          this.loading = true
          return delQrtz({ id: row.id })
        })
        .then(() => {
          this.loading = false
          this.getList()
          this.msgSuccess('删除成功')
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style scoped></style>
